<template>
  <a-modal
    title="出库"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row>

          <a-col :span="12" v-show="false">
            <a-form-item
              label="订单号"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback="">
              <a-input placeholder="请输入订单号" v-decorator="['orderNumber', {rules: [{required: false, message: '请输入订单号！'}]}]"/>
            </a-form-item>
          </a-col>

          <a-col :span="12" v-show="false">
            <a-form-item
              label="订单类型"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback="">
              <a-input placeholder="请输入订单类型" v-decorator="['orderType', {rules: [{required: true, message: '请输入订单类型！'}]}]"/>
            </a-form-item>
          </a-col>

<!--          <a-col :span="24">-->
<!--            <a-form-item-->
<!--              label="供应商"-->
<!--              :labelCol="labelCol"-->
<!--              :wrapperCol="wrapperCol"-->
<!--              has-feedback="">-->
<!--              <a-radio-group button-style="solid" v-model="orgIdSupplier">-->
<!--                <a-radio-button :value="id" v-for="{id, name} in supplierList">-->
<!--                  {{ name }}-->
<!--                </a-radio-button>-->
<!--&lt;!&ndash;                <a-radio-button value="other">&ndash;&gt;-->
<!--&lt;!&ndash;                  其它&ndash;&gt;-->
<!--&lt;!&ndash;                </a-radio-button>&ndash;&gt;-->
<!--              </a-radio-group>-->
<!--            </a-form-item>-->
<!--          </a-col>-->

          <a-col :span="24">
            <a-table
              ref="table"
              size="default"
              style="margin-bottom: 24px"
              :columns="columns"
              :data-source="filteredData"
              :pagination="false">
            </a-table>
          </a-col>

          <a-col :span="24">
            <a-form-item
              label="备注"
              :labelCol="labelColBlock"
              :wrapperCol="wrapperColBlock"
              has-feedback="">
              <a-input placeholder="请输入备注" v-decorator="['remark', {rules: [{required: true, message: '请输入备注！'}]}]"/>
            </a-form-item>
          </a-col>

        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import {addAllType, addSimple, page} from '@/api/modular/main/emsorder/emsOrderManage'
import {STable} from '@/components'

export default {
  components: {
    STable
  },
  data() {
    return {
      labelCol: {
        xs: {span: 24},
        sm: {span: 5}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 15}
      },
      labelColBlock: {
        xs: {span: 24},
        sm: {span: 2}
      },
      wrapperColBlock: {
        xs: {span: 24},
        sm: {span: 20}
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      fileList: [],
      orderMaterials: [],
      orgIdSupplier: 'all',
      // supplierList: [],
      columns: [       // 表头
        {
          title: '序号', width:'80px',
          dataIndex: 'index',
          customRender: (text, record, index) => `${index + 1}`
        },
        {
          title: '物料',
          dataIndex: 'materialName'
        },
        {
          title: '料号',
          dataIndex: 'materialCode'
        },
        {
          title: '数量',
          dataIndex: 'number'
        }
      ],
    }
  },
  computed: {
    filteredData() {
      let orgIdSupplier = this.orgIdSupplier
      if (orgIdSupplier == 'all') {
        return this.orderMaterials
      }
      let filteredData
      if (orgIdSupplier == 'other') {
        let dictValues = this.supplierList.map(dict => dict.id)
        filteredData = this.orderMaterials.filter(value => {
          return dictValues.findIndex(value1 => value1 == value.orgIdSupplier) == -1
        })
      } else {
        filteredData = this.orderMaterials.filter(value => {
          return value.orgIdSupplier == orgIdSupplier
        })
      }
      return filteredData
    },
    supplierList() {
      return this.$util.getOrgList([this.$businessEnum.ORG_TYPE_ENUM.PRIMARY_SUPPLIER.id, this.$businessEnum.ORG_TYPE_ENUM.NORMAL_SUPPLIER.id])
    }
  },
  methods: {
    add(record) {
      if (!(record.selectedRows && record.selectedRows.length > 0)) {
        this.$message.error('请先选择物料!')
        return
      }
      this.visible = true
      // 设定订单类型
      setTimeout(() => {
        this.form.setFieldsValue(record)
      }, 100)
      // 创建简单订单(无单出入库)时,record中包含选择的物料
      this.orderMaterials.length = 0
      this.orderMaterials.push(...record.selectedRows)
    },
    handleSubmit() {
      const {form: {validateFields}} = this
      this.confirmLoading = true

      validateFields((errors, values) => {
        if (!errors) {
          // 创建采购单
          // 将池中的物料记录转成订单物料记录
          let orderMaterials = this.orderMaterials.map(values => {
            let {materialPoolId, materialId, number, poolType, materialType, remark, status, createTime, createUser, updateTime, updateUser} = values
            return {
              materialId,
              number,
              remark,
              materialPoolId, //物料池ID，创建后删除用
            }
          })
          // 物料池ID,便于创建订单后删除
          let parameter = Object.assign({}, values, {orderMaterials})
          addSimple(parameter).then((res) => {
            this.confirmLoading = false
            if (res.success) {
              this.$message.success('操作成功')
              this.handleCancel()
              this.$emit('ok', values)
            } else {
              this.$message.info('操作失败：' + res.message)
            }
          }).finally((res) => {
            this.confirmLoading = false
          })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel() {
      this.form.resetFields()
      this.visible = false
    },
  }
}
</script>
